@import "../../style/css/style.less";
html,body{
  max-width: 420px;
  margin:auto;
}
header{
  width: 100%;
  height: 3em;
  background: @cf;
  .pf;
  z-index: 100;
  top: 0;
  left: 0;
  .img{
    width:10em;
    height: 1.6em;
    .db;
    margin:.7em auto 0;
    .bud(@fangjin_logo,center center,100% 100%);
  }
}
header:before,header:after{
  content: '';
  clear: both;
  display: table;
}
.banner{
  width: 100%;
  height: 16em;
  background-color: #e3e3e3;
  //margin-bottom: 3em;
  margin-top: 3em;
  .pr;
  i{
    .pa;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
  }
  .text{
    width: 60%;
    height: 8em;
    .pa;
    .cm;
    .tac;
    background: rgba(0,0,0,.3);
    color: @cf;
    .br(3px);
    p{

      overflow: hidden;
      white-space:nowrap;
    }
    p:first-child{
      font-size:18px;
      margin-top: 35px;
      letter-spacing: 2px;
    }
    p:last-child{
      font-size: 16px;
    }
  }
  .icon{
    width: 100%;
    height: 1.5em;
    .pa;
    left: 0;
    bottom: -1px;
    b{
      width: 100%;
      height: 98%;
      .pa;
      left: 0;
      bottom: 0;
      top: inherit;
    }
    b:first-child{
      height: 100%;
      .bud(@Banner_bg,center center,100% 100%);
    }
    b:last-child{
      .bud(@Banner_line,center center,100% 100%);
    }
  }
}
.banner:before,.banner:after{
  content: '';
  clear: both;
  display: table;
}
main{
  >div{
    .tac;
    section{
      font-size: 20px;
      color:@c3;
      .pr;
      .tac;
      i{
        //width: 160px;
        height: 17px;
        display: block;
        overflow: hidden;
        .bud(@Mob_PR,center center,100% 100%);
        margin:5px auto;
      }
      i.hr{
        .bud(@Mob_HR,center center,100% 100%);
      }
      i.cr{
        .bud(@Mob_CR,center center,100% 100%);
      }
      >s{
        width: 50px;
        height: 50px;
        .pa;
        left: 0;
        right: 0;
        top: -50%;
        margin:auto;
        .bud(@fangjin_bg_1,center center,100% 100%);
      }
    }
    section+div{
      margin-top: 1em;
    }
    >div{
      width: 100%;
      height: 14em;
      .bs(0 0 6px #999);
      margin-bottom: 1em;
      .pr;
      .text{
        width:33.33%;
        height: 100%;//此处高度跟随字体大小
        .pa;
        top: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        background: @cf;
        padding:1em;
        font-size: 12px;
        text-align: left;
        overflow: hidden;

        b{
          width: 8px;
          height: 2em;
          background: #BEA770;
          .pa;
          top: 0px;
          right: 0px;
        }
        h1{
          font-size: 14px;
          color:@c3;
        }
        h2{
          font-size: 12px;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow:ellipsis;
          margin-bottom: .2em;
          color:@c3;
        }
        p{
          .pr;
          s{
            width: 30px;
            height: 21px;
            background: #fff;
            .pa;
            right: 0px;
            bottom: 0px;
          }
        }
        s{
          width: 50%;
          height: 30%;
          .pa;
          right: 0;
          bottom: 0;
          .bud(@fangjin_bg_1,center center,100% 100%);
        }
        i{
          width: 100%;
          height: 2px;
          display: block;
          margin-bottom: 5px;
          .bud(@fangjin_line,center center,contain);
        }
      }

    }
    button{
      width: 100%;
      height: 50px;
      line-height: 50px;
      .tac;
      background: none;
      border: 0;
      color:@c6;
      //font-size: 16px;
      background: @cf;
      margin-top: -1em;
      .pr;
      i{
        width: 10px;
        height: 5px;
        display: inline-block;
        .bud(@Mob_loading,center center,100% 100%);
        .pr;
        top: -2px;
      }
    }
  }
  #pr{
    padding:3em 0 0em;
    //margin-bottom: 1.5em;
  }
  #hr{
    padding:3em 0 0em;
    background: #f1f1f1;
    .pr;
    .text{
      width: 39%;
      height: 196px;
      margin:0 auto;
      background: rgba(255,255,258,.95);
      //border:1px solid #BEA770;
      .pa;
      left: 8%;
      right: auto;
    }
    >div{
      //margin-bottom: 3.5em;
    }
    button{
      //margin-top:-1em;
      .pa;
      left: 0;

    }
  }
  #cr{
    padding:3em 0 0em;
    background: #f1f1f1;
    .text{
      width: 45%;
      height: 80%;
      left: 0;
      right: auto;
      background: rgba(255,255,258,.95);
    }
  }
}
footer{
  overflow: hidden;
  padding: 2.5em;
  background: #262838;
  .pr;
  section{
    font-size: 1.5em;
    color: @c3;
    margin-bottom: 1em;
    .tac;
    p{
      text-indent: unset!important;
      font-size: .8em;
    }
    i{
      width:100%;
      height: 5px;
      .bud(@single_line,center center,100% 100%);
      .db;
      margin-top: .5em;
    }
  }
  >div{
    width: 100%;
    display: inline-block;
    .pr;
    >div{
      .fl;
      display: inline-block;
      img{
        width: 100%;
      }
    }
    .left{
      width: 40%;
      padding:0 1em;
      .img:first-child{
        margin-bottom: .5em;
        width: 100%;
        height: 1.8em;
        .bud('/single/images/Single_saoyisao.svg',center center,100% 100%);
      }
    }
    .right{
      width: 66%;
      .pa;
      bottom: 0.5em;
      z-index: 2;
      font-size: 12px;
      h2{
        margin-bottom: 7px;
        margin-top: 7px;
        text-align:left;
        span{
          color: #fff;
        }
      }
      // .img{
      //   width: 100%;
      //   height: 6em;
      //   .bud('/single/images/Single_saoyisao.svg',center center,80%);
      // }
    }
  }
  >p{
    margin: 2em;
    margin-bottom: 3em;
    .tac;
    color: @cf;
    font-size: 12px;
  }
  >i{
    width: 5em;
    height: 11em;
    .pa;
    bottom: 8em;
    right: 0;
    .bud(@fangjin_bg_2,center center,100% 100%);
  }
}
.layer-aside{
  .pf;
  right: 1em;
  bottom: 12em;
  z-index: 100;
  i{
    .db;
    width: 3em;
    height: 3em;
    .br(50%);
    .bud(@aside1,center center,100% 100%);
  }
  .aside0{
    .bud(@fjdh,center center,100% 100%);
  }
  .aside2{
    .bud(@aside2,center center,100% 100%);
  }
  .layer-mask{
    .pf;
    max-width: 420px;
    .cm;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    >div{
      width: 80%;
      height: 25em;
      background: @cf;
      .pa;
      .cm;
      b{
        width: 1em;
        height: 1em;
        .pa;
        right: .5em;
        top: .5em;
        .bud(@close,center center,100% 100%);
        z-index: 1;
      }
      div.title{
        width: 100%;
        height: 11em;
        background-color: #282C3D;
        color: @cf;
        padding:1em 2em 0;
        .tac;
        font-weight: 300;
        font-size: 1em;
        .pr;
        .img{
          width: 100%;
          height: 5em;
          .bud(@bdbj,center center,100% 100%);
          .pa;
          bottom: 0;
          left: 0;
        }
      }
      div.data{
        margin-top: 1em;
        input{
          width: 80%;
          height: 2.5em;
          line-height: 2.5em;
          margin-top: 1em;
          background-color: #F3F3F3;
          .br(3px);
          padding:0 1em;
          border:none;
          margin-left: 10%;
        }
        input[type='button']{
          background-color: #282C3D;
          color: @cf;
          margin-top: 1.8em;
        }
      }
    }
  }
}
.layer-button{
  .pf;
  width: 100%;
  max-width: 420px;
  height:3em;
  .df;
  left: 0;
  bottom: 0;
  right: 0;
  margin:0 auto;
  z-index: 101;
  background:#BEA770;
  >a{
    width: 50%;
    height: 2em;
    line-height: 2em;
    margin-top: .5em;
    .tac;
    color:@cf;
    .db;
    i{
      width: 1em;
      height: 1em;
      display: inline-block;
      .pr;
      top: 3px;
    }
  }
  .button1{
    border-right: 1px solid @cf;

    i{
      .bud(@button1,center center,100% 100%);
    }
  }
  .button2{
    i{
      .bud(@button2,center center,100% 100%);
    }
  }
}
pre{
  font-family: 'Microsoft Yahei', 'arial', 'simsun', 'tahoma';
}